// 引入自定义的ajax方法和isLogin函数
import { ajax, isLogin } from '../utils/ajax.js';

// 引入jQuery和layui库
import '../lib/jquery.js';
import '../lib/layui/layui.js';

// 使用自执行的异步函数来处理登录状态和界面更新
(async function() {
    // 调用isLogin函数检查用户登录状态
    let { status, user } = await isLogin();

    // 如果用户已登录（status为1）
    if (status === 1) {
        // 切换登录状态显示，移除'off'类的'active'，添加'on'类的'active'
        $('.off').removeClass('active');
        $('.on').addClass('active');

        // 设置昵称显示，并绑定点击个人中心跳转到个人页面的逻辑
        $('.nickname').text(user.nickname);
        $('.self').on('click', function() {
            window.location.href = './self.html'; // 点击跳转
        });

        // 绑定退出登录按钮的点击事件
        $('.logout').on('click', async function() {
            // 弹出确认框询问用户是否确定退出登录
            if (!confirm('确定要退出登录吗？')) return;

            // 从本地存储中获取用户ID和Token
            let id = localStorage.getItem('uid');
            let token = localStorage.getItem('token');

            try {
                // 发起退出登录的请求
                let response = await ajax.get('/users/logout', {
                    params: { id },
                    headers: { authorization: token }
                });

                // 检查退出登录请求是否成功
                if (response.data.code !== 1) {
                    throw new Error('注销失败');
                }

                // 从本地存储中移除Token和用户ID
                localStorage.removeItem('token');
                localStorage.removeItem('uid');

                // 切换退出登录后的显示状态
                $('.off').addClass('active');
                $('.on').removeClass('active');
            } catch (error) {
                alert(error.message);
            }
        });
    }
})();

// 定义一个异步函数render，用于渲染轮播图
async function render() {
    try {
        // 发起请求获取轮播图列表
        let response = await ajax.get('/carousel/list');

        // 检查轮播图列表请求是否成功
        if (response.data.code !== 1) {
            console.log('获取轮播图失败');
            return;
        }

        let list = response.data.list;
        let str = ''; // 初始化轮播图HTML字符串

        // 遍历轮播图列表，生成每个轮播图的HTML
        list.forEach((e) => {
            str += `<div><img src="${ajax.defaults.baseURL}/${e.name}"></div>`;
        });

        // 将生成的HTML设置到轮播图容器中
        $('#carousel > :first-child').html(str);

        // 使用layui的carousel模块渲染轮播图
        layui.carousel.render({
            elem: '#carousel', // 指定轮播图容器的选择器
            width: '1200px', // 设置轮播图容器的宽度
            height: '600px', // 设置轮播图容器的高度
            arrow: 'hover', // 设置箭头在悬停时显示
            anim: 'fade' // 设置轮播图切换动画为淡入淡出
        });
    } catch (error) {
        console.error('轮播图渲染失败:', error);
    }
}

// 调用render函数，开始渲染轮播图
render();